<template>
  <view class="update-page">
    <Navbar title="版本更新" />
    
    <view class="update-content">
      <!-- App信息 -->
      <view class="app-info">
        <image class="app-logo" src="/static/logo.png" mode="aspectFill" />
        <text class="app-name">安电司</text>
        <text class="app-version">v{{ updateInfo.version }}</text>
      </view>
      
      <!-- 更新说明 -->
      <view class="update-description">
        <text class="description-title">更新内容</text>
        <view class="description-list">
          <view class="description-item" v-for="(item, index) in updateItems" :key="index">
            <text class="item-dot">•</text>
            <text class="item-text">{{ item }}</text>
          </view>
        </view>
      </view>
      
      <!-- 下载进度 -->
      <view class="download-progress" v-if="isDownloading">
        <view class="progress-info">
          <text class="progress-text">正在下载更新包...</text>
          <text class="progress-percent">{{ Math.round(downloadProgress) }}%</text>
        </view>
        <tn-line-progress
          :percent="downloadProgress"
          active-color="#1ec8e1"
          inactive-color="rgba(255, 255, 255, 0.1)"
          :show-percent="false"
          :duration="300"
          height="8"
          :stripe="true"
          :stripe-animated="true"
        />
      </view>
    </view>

    <!-- 底部固定按钮 -->
    <view class="bottom-actions">
      <button 
        class="update-btn" 
        @click="startUpdate" 
        :disabled="isDownloading"
        v-if="!isDownloading"
      >
        立即更新
      </button>
      <button 
        class="update-btn downloading" 
        disabled
        v-else
      >
        正在下载...
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { createRequest } from '@/utils/request';
import Navbar from '@/components/Navbar.vue';

const updateInfo = ref({
  version: '2.1.0',
  description: '1. 优化了用户界面，提升用户体验\n2. 修复了已知的bug问题\n3. 新增了更多实用功能\n4. 提升了应用性能和稳定性',
  downloadUrl: '',
  isForce: false
});

const isDownloading = ref(false);
const downloadProgress = ref(0);

// 将更新描述转换为数组
const updateItems = computed(() => {
  if (!updateInfo.value.description) return [];
  return updateInfo.value.description.split('\n').filter(item => item.trim());
});

onMounted(() => {
  // 获取传递过来的更新信息
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;
  
  if (options.updateInfo) {
    updateInfo.value = JSON.parse(decodeURIComponent(options.updateInfo));
  }
});

// 开始更新
async function startUpdate() {
  if (isDownloading.value) return;
  
  isDownloading.value = true;
  downloadProgress.value = 0;
  
  try {
    // 模拟下载进度（实际项目中可以根据下载事件更新进度）
    const progressTimer = setInterval(() => {
      if (downloadProgress.value < 90 && isDownloading.value) {
        downloadProgress.value += 10;
      }
    }, 200);
    
    // 下载文件
    uni.downloadFile({
      url: updateInfo.value.downloadUrl,
      success: (res) => {
        clearInterval(progressTimer);
        if (res.statusCode === 200) {
          downloadProgress.value = 100;
          setTimeout(() => {
            installUpdate(res.tempFilePath);
          }, 500);
        } else {
          throw new Error('下载失败');
        }
      },
      fail: (error) => {
        clearInterval(progressTimer);
        throw new Error('下载失败');
      }
    });
    
  } catch (error) {
    isDownloading.value = false;
    downloadProgress.value = 0;
    uni.showToast({ title: '更新失败', icon: 'none' });
  }
}

// 安装更新
function installUpdate(filePath) {
  // 启动系统安装工具
  plus.runtime.install(filePath, {
    force: false
  }, () => {
    // 安装成功回调（通常不会执行，因为会跳转到系统安装界面）
    console.log('安装成功');
  }, (error) => {
    // 安装失败回调
    console.error('安装失败:', error);
    isDownloading.value = false;
    downloadProgress.value = 0;
    uni.showToast({ title: '安装失败', icon: 'none' });
  });
}


</script>

<style scoped lang="scss">
.update-page {
  @include page-with-header;
  background: #172869;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.update-content {
  flex: 1;
  padding: 60rpx 40rpx 40rpx;
  box-sizing: border-box;
}

.app-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;
}

.app-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 24rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 32rpx rgba(30, 200, 225, 0.2);
}

.app-name {
  color: #fff;
  font-size: 40rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
}

.app-version {
  color: #1ec8e1;
  font-size: 32rpx;
  font-weight: 500;
}

.update-description {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 24rpx;
  padding: 40rpx;
  margin-bottom: 60rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.1);
}

.description-title {
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 30rpx;
  display: block;
}

.description-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.description-item {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
}

.item-dot {
  color: #1ec8e1;
  font-size: 28rpx;
  font-weight: bold;
  margin-top: 4rpx;
  flex-shrink: 0;
}

.item-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 28rpx;
  line-height: 1.6;
  flex: 1;
}

.download-progress {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20rpx;
  padding: 30rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.1);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.progress-text {
  color: #fff;
  font-size: 28rpx;
}

.progress-percent {
  color: #1ec8e1;
  font-size: 32rpx;
  font-weight: 600;
}

.bottom-actions {
  position: fixed;
  bottom: 40rpx;
  left: 0;
  right: 0;
  padding: 0 32rpx;
  box-sizing: border-box;
}

.update-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #1ec8e1 0%, #0d8ba3 100%);
  border: none;
  border-radius: 44rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(30, 200, 225, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  
  // 渐变背景动画
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 1.5s infinite;
  }
  
  // 呼吸灯效果
  animation: breathe 2s ease-in-out infinite;
}

// 闪烁动画
@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

// 呼吸灯动画
@keyframes breathe {
  0%, 100% {
    box-shadow: 0 8rpx 24rpx rgba(30, 200, 225, 0.3);
  }
  50% {
    box-shadow: 0 12rpx 32rpx rgba(30, 200, 225, 0.6);
  }
}

.update-btn:active {
  transform: scale(0.98);
}

.update-btn:disabled {
  background: rgba(30, 200, 225, 0.3);
  color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  animation: none;
  
  &::before {
    display: none;
  }
}

.update-btn.downloading {
  background: rgba(30, 200, 225, 0.5);
  animation: pulse 1.5s ease-in-out infinite;
  
  &::before {
    display: none;
  }
}

// 脉冲动画（用于下载中状态）
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

</style> 